<template>
  <div id="wghlarge">
    <div id="wghmap">
      <div class="map-menu-details" style="max-width: 2360px;left:0;display: flex;">
        <div class="mp-body" v-for="(mp, id) in mapMenuOptions" :key="id" style="max-height: 950px;">
          <div v-for="(item, index) in mp.childs" :key="index">
            <div >
              <div class="item" style="font-size:12px;margin: 5px;">
                <img :src="'/static/imgs/map/' + item.id + '.png'" alt="">
                {{item.name}}
                <span class="count" @click="handler(item)">{{item.id}}.png</span>
              </div>
              <!-- <transition :duration="200" enter-active-class="fadeInLeft" leave-active-class="fadeOutLeft"> -->
                <div v-if="item.child" class="animated" style="margin-left: 30px;">
                  <div class="item curpointer" v-for="(it, id) in item.child" :key="id" style="font-size:12px;margin: 5px;">
                    <img :src="'/static/imgs/map/' + it.id + '.png'" alt="">
                    <!-- • -->
                     {{it.name}}
                    <span class="count" @click="handler(it)">{{it.id}}.png</span>
                  </div>
                </div>
              <!-- </transition> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="logo" style="position:absolute;left: 500px;top: 80px;" @click="outprint()">
      <div class="amap-marker-content" style="opacity: 1;"><div class="custom-content-marker breathe-anm ">
        <div class="circle" style="width:22px;height:22px;"></div>
      </div></div>
    </div>
    <div class="logo" style="position:absolute;left: 530px;top: 80px;">
      <div class="amap-marker-content" style="opacity: 1;"><div class="custom-content-marker breathe-anm warning">
        <div class="circle" style="width:22px;height:22px;"></div>
      </div></div>
    </div>
    <div class="logo" style="position:absolute;left: 530px;top: 110px;">
      <div class="amap-marker-content" style="opacity: 1;"><div class="custom-content-marker breathe-anm">
        <div class="circle" style="width:22px;height:22px;"></div>
      </div></div>
    </div>
    <div class="logo" style="position:absolute;left: 560px;top: 80px;">
      <div class="amap-marker-content" style="opacity: 1;"><div class="custom-content-marker breathe-anm right">
        <div class="circle" style="width:22px;height:22px;"></div>
      </div></div>
    </div>
    <div class="logo" style="position:absolute;left: 530px;top: 140px;">
      <div class="amap-marker-content" style="opacity: 1;"><div class="custom-content-marker breathe-anm" :style="style">
        <div class="circle" style="width:22px;height:22px;"></div>
      </div></div>
    </div>
    <textarea cols="30" rows="10" v-model="cssStyle" style="background: #000;width: 485px;left: 10px;color: #fff;position:absolute;"></textarea>
    <div class="wgcolor" style="    position: absolute;
    width: 300px;
    text-align: center;
    color: white;
    top: 500px;
    padding: 100px;
    background: #05112d;">
      <div class="item" v-for="(item, index) in  wgcolor" :key="index" :style="{background: item.color}" style="opacity: 0.6;">
        {{item.name}}
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
  export default {
    name: 'Test',
    data () {
      var mapMenuOptions = [{
        name: '人员',
        active: false,
        alias: 'ry',
        id: "1le3khhz2dojy",
        childs: [{
            id: "19jo8pecdvw2f",
            name: "人口信息",
            count: 0,
            active: false,
            parentId: "1le3khhz2dojy",
            // hideCount: true,
            afterClick: function () {
              vm.handleRightOptions(2, true);
            },
            expand: true,
            child: [
            {
              id: "19jo8pecdvw2f1",
              name: "流动人口",
              parentId: "19jo8pecdvw2f",
              count: 0,
              active: false
              },
              {
              id: "19jo8pecdvw2f2",
              name: "常住人口",
              parentId: "19jo8pecdvw2f",
              count: 0,
              active: false
              }
            ]
          },
          {
            id: "luk1ojf25weq",
            name: "群租房",
            count: 0,
            active: false,
            parentId: "1le3khhz2dojy"
          },
          // {
          //   id: "1le3khhz2dojy2",
          //   name: "领导班子",
          //   parentId: "1le3khhz2dojy",
          //   count: 0
          // },
          {
            id: "1le3khhz2dojy1",
            name: "一长五员",
            parentId: "1le3khhz2dojy",
            count: 0,
            expand: true,
            child: [{
                id: "1le3khhz2dojy1a",
                name: "网格长",
                parentId: "1le3khhz2dojy1",
                count: 0,
                active: false
              },
              {
                id: "1le3khhz2dojy1b",
                name: "网格员",
                parentId: "1le3khhz2dojy1",
                count: 0,
                active: false
              },
              {
                id: "1le3khhz2dojy1e",
                name: "信息员",
                parentId: "1le3khhz2dojy1",
                count: 0,
                active: false
              },
              {
                id: "1le3khhz2dojy1c",
                name: "巡查员",
                parentId: "1le3khhz2dojy1",
                count: 0,
                active: false
              },
              {
                id: "1le3khhz2dojy1d",
                name: "联络员",
                parentId: "1le3khhz2dojy1",
                count: 0,
                active: false
              },
              {
                id: "1le3khhz2dojy1f",
                name: "督查员",
                parentId: "1le3khhz2dojy1",
                count: 0,
                active: false
              }
            ],
            especialControl: true // 客户傻逼需求
          }
        ]
        },
        {
          name: '场所',
          id: "1t1eb8c8i973e",
          active: false,
          alias: 'cs',
          childs: [{
              id: "1hgq8ysha0ffn",
              name: "学校",
              parentId: "1t1eb8c8i973e",
              count: 0,
              expand: false,
              child: [{
                  id: "1hgq8ysha0ffn1",
                  name: "幼儿园",
                  parentId: "1hgq8ysha0ffn",
                  count: 0,
                active: false
                },
                {
                  id: "1hgq8ysha0ffn2",
                  name: "小学",
                  parentId: "1hgq8ysha0ffn",
                  count: 0,
                active: false
                },
                {
                  id: "1hgq8ysha0ffn3",
                  name: "初中",
                  parentId: "1hgq8ysha0ffn",
                  count: 0,
                active: false
                },
                {
                  id: "1hgq8ysha0ffn4",
                  name: "高中",
                  parentId: "1hgq8ysha0ffn",
                  count: 0,
                active: false
                }
              ]
            },
            {
              id: "1k58ue1iifvqg",
              name: "医院",
              parentId: "1t1eb8c8i973e",
              count: 0,
              expand: false,
              child: [{
                  id: "1k58ue1iifvqg2",
                  name: "社区医院",
                  parentId: "1k58ue1iifvqg",
                  count: 0,
                active: false
                },
                {
                  id: "1k58ue1iifvqg1",
                  name: "村社区卫生服务站",
                  parentId: "1k58ue1iifvqg",
                  count: 0,
                active: false
                }
              ]
            },
            {
              id: "97bqeyjvhg2j",
              name: "门店",
              parentId: "1t1eb8c8i973e",
              count: 0,
              active: false
            },
            {
              id: "tc720f8qzjsk",
              name: "转运点",
              parentId: "1t1eb8c8i973e",
              count: 0,
              active: false
            },
            {
              id: "4bsj7d9cm8zr",
              name: "宗教场所",
              parentId: "1t1eb8c8i973e",
              count: 0,
              expand: false,
              child: [{
                  id: "4bsj7d9cm8zr1",
                  name: "佛教",
                  parentId: "4bsj7d9cm8zr",
                  count: 0,
                  active: false
                },
                {
                  id: "4bsj7d9cm8zr2",
                  name: "道教",
                  parentId: "4bsj7d9cm8zr",
                  count: 0,
                  active: false
                },
                {
                  id: "4bsj7d9cm8zr3",
                  name: "基督教",
                  parentId: "4bsj7d9cm8zr",
                  count: 0,
                  active: false
                },
                {
                  id: "4bsj7d9cm8zr4",
                  name: "天主教",
                  parentId: "4bsj7d9cm8zr",
                  count: 0
                },
                {
                  id: "4bsj7d9cm8zr5",
                  name: "民间信仰",
                  parentId: "4bsj7d9cm8zr",
                  count: 0,
                  active: false
                }
              ]
            },
            {
              id: "123vl2x3ldha4",
              name: "文化场所",
              parentId: "1t1eb8c8i973e",
              count: 0,
              active: false
            },
            {
              id: "5r6q2jah22hr",
              name: "排涝站",
              parentId: "1t1eb8c8i973e",
              count: 0,
              active: false
            },
            {
              id: "1efxyhs0ebx80",
              name: "微型消防工作站",
              parentId: "1t1eb8c8i973e",
              count: 0,
              active: false
            },
            {
              id: "1ura96ek3fr21",
              name: "救灾物资储备点",
              parentId: "1t1eb8c8i973e",
              count: 0,
              active: false
            }
          ]
        },
        {
          name: '事项',
          id: "6syd7j284ve1",
          active: false,
          alias: 'sx',
          childs: [{
              id: "1ktjag6y1937u",
              name: "信息上报",
              parentId: "6syd7j284ve1",
              count: 0,
              expand: true,
              child: [{
                  id: "1ktjag6y1937u1",
                  name: "待处理",
                  parentId: "1ktjag6y1937u",
                  count: 0,
                  active: false
                },
                {
                  id: "1ktjag6y1937u2",
                  name: "已处理",
                  parentId: "1ktjag6y1937u",
                  count: 0,
                  active: false
                }
              ]
            },
            {
              id: "4s3j1clfpspo",
              name: "矛盾纠纷",
              parentId: "6syd7j284ve1",
              count: 0,
              active: false,
              onclick: () => {
                vm.handleRightOptions(5);
              }
            },
            {
              id: "1n7guj6xhhyw7",
              name: "舆情信息",
              parentId: "6syd7j284ve1",
              count: 0,
              active: false,
              onclick: () => {
                vm.handleRightOptions(4);
              }
            },
            {
              id: "1q9l109fpyttu",
              name: "12345",
              parentId: "6syd7j284ve1",
              count: 0,
              active: false,
              onclick: () => {
                vm.handleRightOptions(3);
              }
            },
            {
              id: "l41v01i3y1mx",
              name: "社保预警",
              parentId: "6syd7j284ve1",
              count: 0,
              active: false
            },
            {
              id: "1qokwp0wj3myy",
              name: "263专项",
              parentId: "6syd7j284ve1",
              count: 0,
              active: false,
              onclick: () => {
                vm.handleRightOptions(6);
              }
            },
            {
              id: "moohpi0jb7va",
              name: "专项整治",
              parentId: "6syd7j284ve1",
              count: 0,
              active: false
            }
          ]
        },
        {
          name: '部件',
          id: "gyatdn1htull",
          active: false,
          alias: 'yj',
          childs: [{
              id: "un1k7j9ba8e",
              name: "水闸",
              count: 0,
              active: false
            },
            {
              id: "lgwo0vqid6a3",
              name: "泵站",
              count: 0,
              active: false
            },
            {
              id: "1unh1t9w12ilc",
              name: "消防栓",
              count: 0,
              active: false
            },
            {
              id: "qf7w4t4d9h5r",
              name: "文物",
              count: 0,
              active: false
            },
            {
              id: "7va61phu5tbz",
              name: "加油站",
              count: 0,
              active: false
            },
            {
              id: "un1k7j9ba8ea",
              name: "路灯",
              parentId: "gyatdn1htull",
              count: 0,
              active: false
            },
            {
              id: "un1k7j9ba8eb",
              name: "窨井盖",
              parentId: "gyatdn1htull",
              count: 0,
              active: false
            },
            {
              id: "un1k7j9ba8ec",
              name: "垃圾箱",
              parentId: "gyatdn1htull",
              count: 0,
              active: false
            }
          ]
        },
        {
          name: '组织',
          id: "19rv2fy2yv63h",
          active: false,
          alias: 'zj',
          expand: false,
          childs: [{
              id: "95jtmhsbh78",
              name: "党组织",
              parentId: "19rv2fy2yv63h",
              count: 0,
              active: false,
              expand: true,
              child: [
                {
                id: "95jtmhsbh781",
                name: "党委",
                parentId: "95jtmhsbh78",
                count: 0,
                active: false
                },
                {
                id: "95jtmhsbh782",
                name: "党总支",
                parentId: "95jtmhsbh78",
                count: 0,
                active: false
                },
                {
                id: "95jtmhsbh783",
                name: "党支部",
                parentId: "95jtmhsbh78",
                count: 0,
                active: false
                },
                {
                id: "95jtmhsbh784",
                name: "党建联盟",
                parentId: "95jtmhsbh78",
                count: 0,
                active: false
                }
                ]
            },
            {
            id: "95jtmhsbh78d",
            name: "商会",
            parentId: "19rv2fy2yv63h",
            count: 0,
            active: false
            },
            {
              id: "95jtmhsbh78a",
              name: "预备役",
              parentId: "19rv2fy2yv63h",
              count: 0,
              expand: true,
              child: [{
                  id: "95jtmhsbh78aa",
                  name: "应急力量",
                  parentId: "95jtmhsbh78a",
                  count: 0,
                  active: false
                },
                {
                  id: "95jtmhsbh78ab",
                  name: "专业力量",
                  parentId: "95jtmhsbh78a",
                  count: 0,
                  active: false
                }
              ]
            },
            {
              id: "95jtmhsbh78b",
              name: "社会组织",
              parentId: "19rv2fy2yv63h",
              count: 0,
              active: false
            },
            {
              id: "95jtmhsbh78c",
              name: "志愿者",
              parentId: "19rv2fy2yv63h",
              count: 0,
              active: false
            }
          ]
        }
      ];
      var wgcolor = [{name: "阳庄村", color: "#f092bb"},
{name: "北渚村", color: "#d2ca03"},
{name: "徐霞客村", color: "#ec3e9f"},
{name: "马镇村", color: "#efaf1a"},
{name: "湖塘村", color: "#0178d2"},
{name: "红星村", color: "#e94544"},
{name: "上东村", color: "#d4b17a"},
{name: "金凤村", color: "#37b935"},
{name: "璜塘村", color: "#4561f3"},
{name: "任九房村", color: "#f9c034"},
{name: "新须毛村", color: "#e94544"},
{name: "方园村", color: "#e40a2c"},
{name: "璜东村", color: "#24bf62"},
{name: "皋岸村", color: "#f45f56"},
{name: "东宏村", color: "#31c24d"},
{name: "黎明村", color: "#1c90e7"},
{name: "峭岐村", color: "#f29a76"},
{name: "南苑村", color: "#df218f"},
{name: "新街村", color: "#fff45c"},
{name: "宏岐村", color: "#5458e4"},
{name: "钓岐村", color: "#df218f"}];
      return {
        mapMenuOptions,
        style: '',
        cssStyle: '',
        wgcolor
      };
    },
    methods: {
      outprint: function () {
        var vm = this;
        var result = '';
        vm.mapMenuOptions.forEach(function (menu) {
          menu.childs.forEach(function (item) {
            var style = `background-image: url(/static/imgs/map/${item.id}.png); background-size: 100% 100%;`;
            result += `&._${item.id} { ${style} }`;
            if (item.child) {
              item.child.forEach(function (it) {
                var style = `background-image: url(/static/imgs/map/${it.id}.png); background-size: 100% 100%;`;
                result += `&._${it.id} { ${style} }`;
              });
            }
          })
        });
        console.log(result);
      },
      handler: function (it) {
        this.activeItem = '_' + it.id;
        this.style = `background-image: url(/static/imgs/map/${it.id}.png); background-size: 100% 100%;`
        this.cssStyle = `&._${it.id} { ${this.style} }`;
      }
    },
    mounted: function () {
      document.getElementById('currentInfo').remove();
    },
    watch: {
    }
  };
</script>

<style lang="scss">
</style>
